<!--
* @description:部门管理
* @fileName: DivisionManagement
* @author:孟帅龙
* @date:2021-1-13
* @后台人员:孟帅龙
-->
<template>
  <div>
    <!-- 部门管理 -->
    <!-- 查询条件 -->
    <div class="bmselect">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="部门名称：">
          <el-input v-model="DeptName" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
          <el-button @click="loadReset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="goBack">新增</el-button>
          <el-button type="danger" @click="handleBatchDelete"
            >批量删除</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 显示列表 -->
    <div class="bmtable">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="DeptName" label="部门名称"> </el-table-column>
        <el-table-column prop="SuperiorDept" label="上级部门">
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.CreateTime.substr(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleUpdateCheck(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="bmpage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageindex"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalcount"
      >
      </el-pagination>
    </div>
    <!-- 编辑模态框 -->
    <el-dialog title="编辑部门信息" :visible.sync="dialogFormVisible">
      <el-form :model="checkData">
        <el-form-item label="部门编号：" :label-width="formLabelWidth">
          <el-input v-model="checkData.DeptNumber" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门名称：" :label-width="formLabelWidth">
          <el-input v-model="checkData.DeptName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级名称:" :label-width="formLabelWidth">
          <el-select v-model="checkData.SuperiorDept" placeholder="请选择上级名称">
            <el-option label="——" value="——"></el-option>
            <el-option label="总经理" value="总经理"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      DeptName: "",
      pageindex: 1,
      pagesize: 3,
      totalcount: 0,
      multipleSelection: [],
      //全选非全选数组
      ids: [],
      checkData: {
        DeptNumber:"",
        DeptName:"",
        SuperiorDept:"",
      },
      //编辑模态框
      dialogFormVisible: false,
      formLabelWidth: "120px",
    };
  },
  methods: {
    //跳转添加页面
    goBack() {
      this.$router.push("/TheNewDepartment");
    },
    //查询显示分页
    loadData() {
      this.$axios
        .get("https://localhost:44399/api/app/department/department-page-show", {
          params: {
            //?DeptName=1&pageindex=1&pagesize=3
            DeptName: this.DeptName,
            pageindex: this.pageindex,
            pagesize: this.pagesize,
          },
        })
        .then((res) => {
          this.tableData = res.data.PageData;
          this.totalcount = res.data.PageTotal;
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.loadData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = [];
      for (var i = 0; i < val.length; i++) {
        this.ids.push(val[i].Id);
      }
    },
    //重置
    loadReset() {
      this.DeptName = "";
      this.loadData();
    },
    //删除
    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios
            .delete("https://localhost:44399/api/app/department/"+ row.Id +"/department")
            .then((res) => {
              if (res.data.Code > 0) {
                this.$message.success("删除成功");
                this.loadData();
              } else {
                this.$message.error("删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量删除
    handleBatchDelete() {
      if (this.ids.length == 0) {
        this.$message.warning("请至少选择一条操作的数据");
        return;
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios
            .delete(
              "https://localhost:44399/api/app/department/batch-department?ids=" + this.ids
            )
            .then((res) => {
              if (res.data.Code > 0) {
                this.$message.success("批量删除成功");
                this.loadData();
              } else {
                this.$message.error("批量删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消批量删除",
          });
        });
    },
    //编辑
    handleEdit() {
      this.$axios
        .post(
          "https://localhost:44399/api/app/department/update-department",
          this.checkData
        )
        .then((res) => {
          if (res.data > 0) {
            this.$message.success("修改成功");
            this.dialogFormVisible = false;
            this.loadData();
          } else {
            this.$message.error("修改失败");
          }
        });
    },
    //详情
    handleUpdateCheck(row) {
      this.dialogFormVisible = true;
      this.checkData = row;
    },
  },
  created() {
    this.loadData();
  },
};
</script>

<style>
.bmselect {
  margin: 10px;
}
.bmtable {
  margin: 10px;
}
.bmpage {
  margin: 10px;
}
</style>